<template>
	<view @touchstart="handletouchstart" @touchend="handletouchend">
		<slot name="swiperAction"></slot>
	</view>
</template>

<script setup lang="ts">
	// import {emit} from 'vue'
	let starttime = 0;
	let endtime = 0;
	let startX = 0;
	let startY = 0;
	let endX = 0;
	let endY = 0;
	const app = getApp();
	
	
	const handletouchstart = (e) => {
		startX = e.changedTouches[0].pageX
		startY = e.changedTouches[0].pageY
		// console.log("start======>",e.changedTouches[0].pageX , e.changedTouches[0].pageY)
		starttime = Date.now()
		// console.log(starttime)
	}
	const emit = defineEmits(['onSwiperAction']);
	const handletouchend = (e) => {
		endtime = Date.now()
		endX = e.changedTouches[0].pageX 
		endY = e.changedTouches[0].pageY
		// console.log("end======>",e.changedTouches[0].pageX , e.changedTouches[0].pageY)
		if(!isLegal()){
			console.log("no")
		}
	}
	
	const isLegal = () =>{
		if(endtime - starttime > 5000 ){
			return false;
		}
		
		if(Math.abs(endX - startX)>50 && Math.abs(endY - startY) <10){
			let dir = endX - startX > 0 ? 'right' : 'left';
			emit('onSwiperAction',dir)
			return dir;
		}else{
			return false;
		}
	}
	
	// 使用emit传入函数
	// const emit = defineEmits(['handletouchend','handletouchstart','isLegal']);
	// emit('handletouchend',handletouchend)
	// emit('handletouchstart',handletouchstart)
	// emit('isLegal',isLegal)
	
	// 使用expose直接暴露函数，但是只能通过ref绑定dom元素去使用
	defineExpose({
		handletouchend,
		handletouchstart,
		// isLegal
	})
</script>

<style>
	
</style>
